<template>
	<base-popup :modelValue="modelValue" :closable="false" is-go-back @go-back="onClose">
		<template #title>
			<div class="title">
				{{ t('wallet.usdtAddressSelect') }}
			</div>
			<!--			<base-icon class="close-icon" name="close" @click="onClose"></base-icon>-->
		</template>
		<n-carousel v-for="item in addresses" :key="item.id">
			<!--		<van-swipe-cell v-for="item in addresses" :key="item.id">-->
			<!--			<van-cell :border="false" class="usdt-address-cell-van">-->
			<div
				class="min-h-[64px] flex items-center py-[5px] px-[18px] border-b-[1px] border-border-1"
				@click="onSelect(item)">
				<!--				<img-->
				<!--					class="img"-->
				<!--					:src="require(`@/assets/img/wallet-type/${WalletType.usdt.id}.png`)"-->
				<!--					alt="" />-->
				<base-image :src="`wallet-type/${WalletType.usdt.id}.png`" class="h-[38px]" />

				<div class="w-full ml-[15px] text-left overflow-hidden">
					<div class="text-t-1">
						<span class="app-font-bold">{{ appStore.currency }}</span>
						{{ UsdtNetwork.trx.id }}
						<!--							({{ enumName(UsdtNetwork, item.network, undefined, undefined) }})-->
					</div>
					<div class="mt-1 text-sm text-t-3 break-words">
						{{ item.address }}
						<base-copy class="ml-1" :value="item.address"></base-copy>
					</div>
				</div>
			</div>
			<!--			</van-cell>-->
			<template #right>
				<base-button
					square
					type="warning"
					:text="$t('action.remove')"
					class="h-full"
					@click="onRemove(item.id)" />
			</template>
			<!--		</van-swipe-cell>-->
		</n-carousel>
		<div class="py-[28px] px-10">
			<base-button icon="plus" block round @click="handleAddCard">
				{{ t('wallet.usdtAddressAdd') }}
			</base-button>
		</div>
	</base-popup>

	<usdt-address-add />
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { UsdtNetwork, WalletType } from '@/enums'
import { removeCryptoAddress } from '@/api/wallet'
import { t } from '@/utils'
import { useAppStore, useWalletStore } from '@/store'
import { useMessage } from '@/hooks'
import { BasePopup, BaseCopy, BaseButton, BaseImage } from '@/components/base'
import UsdtAddressAdd from '../usdt-address-add/index.vue'

defineProps({
	modelValue: {
		type: Boolean,
		required: true
	}
})

const emits = defineEmits(['update:modelValue', 'select'])

// const store = useStore()
const message = useMessage()
const walletStore = useWalletStore()
const appStore = useAppStore()
const addresses = computed(() => walletStore.addresses)
// const router = useRouter()
const handleAddCard = () => {
	// router.push('/wallet/usdt-address-add')
	walletStore.setWalletUsdtAddressSelectPopupShow(true)
}

const onSelect = (item: any) => {
	emits('select', item)
	onClose()
}

const onRemove = async (id: any) => {
	// let loading
	try {
		// 	loading = showLoading()
		await removeCryptoAddress({ id })
		// loading.close()
		message.success(t('wallet.usdtAddressRemoveSuccess'))
		// store.dispatch('wallet/getCryptoAddresses')
		await walletStore.getCryptoAddresses()
		onClose()
	} catch (error) {
		// loading.close()
		message.error(error)
	}
}

const onClose = () => {
	emits('update:modelValue', false)
}
</script>
<style lang="scss" scoped></style>
